<template>
  <div>
    <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
      <el-form-item prop="studentId">
        <el-input v-model="formInline.studentId" placeholder="请输入学生学号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="checkSubmit('formInline')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData.list"
      stripe
      style="width: 100%">
      <el-table-column
        prop="thesisId"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="student.studentName"
        label="学生姓名">
      </el-table-column>
      <el-table-column
        prop="thesisTitle"
        label="论题">
      </el-table-column>
      <el-table-column
        prop="studentId"
        label="学号">
      </el-table-column>
      <el-table-column
        prop="thesisDate"
        label="提交时间"
        :formatter="dateFormat">
      </el-table-column>

      <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="dialogFormVisible = true" @click.native="thesisSel(scope.row.thesisId)">评分</el-button>
            <a :href="scope.row.thesisAddress">  <el-button type="primary" >下载</el-button></a>
    <el-dialog title="论文详情" :visible.sync="dialogFormVisible">
      <el-form :model="form"  :rules="rules2" ref="form">

        <el-form-item label="学号:" :label-width="formLabelWidth" >
            {{form.studentId}}
        </el-form-item>


        <el-form-item label="评分:" :label-width="formLabelWidth" prop="thesisScore" >
          <el-input  auto-complete="off" v-model="form.thesisScore"  placeholder="请输入分数"></el-input>
        </el-form-item>

      </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click.native="thesisUp('form')">确 定</el-button>
          </div>
        </el-dialog>

      </template>

    </el-table-column>





    </el-table>

    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageIndex"
      :page-size="pageSize"
      layout="total,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

</div>
  </template>

  <style>
  .el-table th{
    text-align: center;
  }
  </style>

  <script>
  import {papermanageFy,papermanageSel,papermanageUp} from'@/axios/api'
  import {formatDate} from '@/common/js/date'
    export default {
      data() {
        return {
        dialogFormVisible: false,
        form: {
          studentId:'',
          thesisScore:''
         },
         id:'',
        formInline:{
          studentId:''
        },
        formLabelWidth: '120px',

          pageIndex : 1,
          total:100,
          pageSize:10,
          tableData: [],
          rules: {
           // studentId: [
           //   { required: true, message: '请输入学生学号查询', trigger: 'blur' },
           //   { pattern: /^[0-9]+$/, message: '请输入正整数', trigger: 'blur'}
             // { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
           // ],
        },
        rules2: {
         thesisScore: [
           { required: true, message: '请输入分数', trigger: 'blur' },
           { pattern: /^1?[1-9]?\d([.]\d)?$/, message: '请输入正确的分数', trigger: 'blur'}
           // { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
         ],
      }
        }
      },
      methods:{
        /**
         * 日期格式化
         */
        dateFormat(row,column){
          var date = row[column.property];
          return formatDate (new Date(date),'yyyy-MM-dd');
        },
        checkSubmit(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.thesisList() ;

            } else {
              console.log('error submit!!');
              return false;
            }
          });

        },
        thesisList(){
          console.log(this.formInline.condition);
          let params = {pageIndex: this.pageIndex, studentId: this.formInline.studentId}
          papermanageFy(params).then(res =>{
            this.pageSize = res.resData.pageSize;
            this.total = res.resData.total;
            this.tableData=res.resData
          })
        },
        thesisSel(id){
          this.id=id;
          let param={thesisId:id};
          console.log();
          papermanageSel(param).then(res =>{
            console.log(res);
            this.form = res.resData;
          })
        },
        thesisUp(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.dialogFormVisible = false;
              console.log(this.id + "===" + this.form.thesisScore);
              let params = {thesisId: this.id, thesisScore: this.form.thesisScore}
              papermanageUp(params).then(res =>{
                console.log(res);
                if (res.status == 200) {
                  this.$message ({
                    message : '评分成功',
                    type:'success'
                  })
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });

        },
        /**
         * 分页
        */
      handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let params = {pageIndex:val, studentId: this.formInline.studentId };
            papermanageFy(params).then(res =>{
              console.log(res);
            this.tableData =  res.resData;
            // this.pay = res.resData.studentFirstMoney + res.resData.studentSecondMoney;

            })
          },
      },

      mounted(){
        this.thesisList()
      }
    }
  </script>
